import { createElement } from 'react';
import { classPrefix, BaseProp } from '../../variables';
import useInsertClass from '../../hooks/useInsertClass';
import './index.scss';

export interface ImageProp extends BaseProp {
  src: string;
  lazy?: boolean;
  isBackground?: boolean;
  backgroundSize?: 'contain' | 'cover';
  onClick?: (event: any) => any;
  loaded?: () => any;
  loaderror?: () => any;
}

function Image(props: ImageProp) {
  const {
    uiConfig = {},
    style = {},
    className = '',
    src = '',
    isBackground = false,
    backgroundSize = 'cover',
    loaded = () => {},
    loaderror = () => {},
  } = props;
  const insertClass = useInsertClass(uiConfig);
  const compClass = [insertClass, `${classPrefix}-Image`, className].filter(t => t).join(' ');

  if(isBackground){
    return (
      <div style={{backgroundImage: `url("${src}")`, backgroundRepeat: 'no-repeat', backgroundSize, ...style}} className={compClass} />
    );
  }else{
    return (
      <img src={src} className={compClass} style={style} onLoad={loaded} onError={loaderror} />
    );
  }
};

Image.displayName = 'Image';
export default Image;
